<template>
  <div>
    <div class="contain">
      <a :href="href" target="_blank" style="display:none;" ref="hrefA"></a>
      <div class="model">
        <el-row :gutter="63" v-if="list.length > 0">
          <el-col
            :span="8"
            v-for="(item, index) in list"
            :key="index"
            style="margin-bottom:52px;"
          >
            <div class="sysContain">
              <div class="sysView" @click="linkTo(item)">
                <el-image :src="item.img_src" fit="scale-down" class="el_image">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
              <h1 class="title">{{ item.mc }}</h1>
            </div>
          </el-col>
        </el-row>
        <div v-else class="noLink">
          暂无链接
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      href: "",
      list: []
    };
  },
  methods: {
    linkTo(item) {
      this.href = item.src;
      this.$nextTick(() => {
        this.$refs.hrefA.click();
      });
    },
    getList() {
      this.$http
        .get(this.$baseUrl.searchAdmin, {
          params: {
            pop: 2
          }
        })
        .then(res => {
          console.log(res);
          this.list = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped lang="scss">
.contain {
  background-color: $back-color;
  .model {
    width: 1200px;
    margin: 0 auto;
    padding-top: 73px;
    padding-bottom: 40px;
    .sysContain {
      .sysView {
        border-radius: 12px;
        height: 235px;
        margin-bottom: 27px;
        background-color: #fff;
        transition: 0.3s;
        cursor: pointer;
        overflow: hidden;
        &:hover {
          transform: scale(1.05);
          box-shadow: 0 0 10px #999;
        }
        .el_image {
          width: 100%;
          height: inherit;
          .image-slot {
            height: inherit;
            position: relative;
            i {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              font-size: 70px;
              color: #ececec;
            }
          }
        }
      }
      .title {
        font-size: 20px;
        color: #666666;
        text-align: center;
        cursor: pointer;
      }
    }
    .noLink {
      min-height: 300px;
      text-align: center;
      font-size: 30px;
      font-weight: 500;
      color: #999;
    }
  }
}
</style>
